<template>
  <div class="signWrap">
    <div class="sign-box">
      <div class="sign-status">
        <div class="sign-score" v-if="showSign == 2">
          <div class="day">今日签到</div>
          <div class="num">{{dayScore}}积分</div>
        </div>
        <div class="sign-btn" v-else-if="showSign == 1" @click="repairSign">点击签到</div>
      </div>
      <div class="sign-title" v-show="showDay">本周连续签到{{signCount}}天</div>
    </div>

    <div class="sign-rank">
      <div class="activity-box" v-if="showRank == 1">
        <ul class="activity" :class="{active:animate == true}">
          <li v-for="(item,index) in rankList" :key="index">
            <span class="text1">今日签到第{{item.mark}}名:</span>
            <img :src="(item.userUrl=='' || item.userUrl == null)?avatar:item.userUrl" class="avatar" onclick="return false">
            <span class="nickname">{{item.userName}}</span>
            <span class="score">+5</span>
            <img src="./score.png" class="icon" onclick="return false">
            <span class="time">{{item.time | format}}</span>
          </li>
        </ul>
      </div>
      <div class="loading" v-else-if="showRank == 2" v-text="loadWord"></div>
    </div>

    <!--日历组件-->
    <v-calendar :markDateMore="signList" signClass="sign"></v-calendar>

    <!--签到成功提示-->
    <transition name="fade">
      <div class="signModal" v-show="showModal">
        <div class="model-box">
          <div class="start"><img src="./icon.png" class="icon" onclick="return false"/><span class="number" v-text="totalScore">积分</span>
          </div>
          <div class="success" v-text="tipWord"></div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
  import calendar from "../../components/calendar/calendar"
  import {baseUrl} from "../../common/js/env"
  import {getUrlKey, formatDate} from "../../common/js/util"

  export default {
    data() {
      return {
        showSign: 0,
        showRank: 0,
        showDay: false,
        animate: false,
        signList: [],
        userSign: getUrlKey("sign"),
        signCount: "",
        dayScore: "",
        showModal: false,
        totalScore: "",
        tipWord: "",
        rankScore: 0,
        loadWord: "",
        rankList: [],
        avatar: require('./avatar.png')
      }
    },
    mounted() {
      this.querySign();
    },
    methods: {
      querySign() {//查询是否签到
        this.axios.get(baseUrl + "/userSign/selectCurIsSign?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {//没签到
              this.addSign();
            } else {//已签到
              this.axios.get(baseUrl + "/userSign/get_daily_list?sgin=" + this.userSign).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0 && resultObj.data.length > 0) {
                  let rankList = resultObj.data;
                  if (rankList.length > 0) {
                    this.showRank = 1;
                    this.rankList = rankList;
                    for (var i = 0; i < this.rankList.length; i++) {
                      if (parseInt(this.rankList[i].id) == parseInt(this.userSign)) {
                        this.rankScore = 5;
                      }
                      let map = this.rankList[i];
                      map.mark = i + 1;
                    }
                    this.scrollUp();
                  } else {
                    this.loadWord = "今日还未有人签到,赶紧抢占第一名吧！";
                    this.showRank = 2;
                  }
                } else {
                  this.loadWord = "正在拼命加载中...";
                  this.showRank = 2;
                }
              })
              this.querySignList();
            }
          } else {
            this.showSign = 1;
            this.loadWord = "正在拼命加载中...";
            this.showRank = 2;
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      addSign() {//签到
        this.axios.get(baseUrl + "/userSign/add?sgin=" + this.userSign + "&versionType=2.1").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.axios.get(baseUrl + "/userSign/get_daily_list?sgin=" + this.userSign).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0 && resultObj.data.length > 0) {
                let rankList = resultObj.data;
                if (rankList.length > 0) {
                  this.showRank = 1;
                  this.rankList = rankList;
                  for (var i = 0; i < this.rankList.length; i++) {
                    if (parseInt(this.rankList[i].id) == parseInt(this.userSign)) {
                      this.rankScore = 5;
                    }
                    let map = this.rankList[i];
                    map.mark = i + 1;
                  }
                  this.scrollUp();
                } else {
                  this.loadWord = "今日还未有人签到,赶紧抢占第一名吧！";
                  this.showRank = 2;
                }
              } else {
                this.loadWord = "正在拼命加载中...";
                this.showRank = 2;
              }
            })
            this.querySignList((score) => {
              this.tipWord = "签到成功";
              this.totalScore = score;
              this.showModal = true;
              setTimeout(() => {
                this.showModal = false;
              }, 1000)
            })
          } else if (resultObj.code == 0 && resultObj.data == 2) {//签到成功，抢进签到榜单
            this.axios.get(baseUrl + "/userSign/get_daily_list?sgin=" + this.userSign).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0 && resultObj.data.length > 0) {
                let rankList = resultObj.data;
                if (rankList.length > 0) {
                  this.showRank = 1;
                  this.rankList = rankList;
                  for (var i = 0; i < this.rankList.length; i++) {
                    if (parseInt(this.rankList[i].id) == parseInt(this.userSign)) {
                      this.rankScore = 5;
                    }
                    let map = this.rankList[i];
                    map.mark = i + 1;
                  }
                  this.scrollUp();
                } else {
                  this.loadWord = "今日还未有人签到,赶紧抢占第一名吧！";
                  this.showRank = 2;
                }
              } else {
                this.loadWord = "正在拼命加载中...";
                this.showRank = 2;
              }
            })
            this.querySignList((score) => {
              this.tipWord = "签到成功(抢入签到榜,+5积分)";
              this.totalScore = parseInt(score + 5);
              this.showModal = true;
              setTimeout(() => {
                this.showModal = false;
              }, 1000)
            })
          } else {
            this.showSign = 1;
            this.loadWord = "正在拼命加载中...";
            this.showRank = 2;
            this.$vux.toast.text("签到失败", "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      querySignList(callback) {//查询签到列表
        this.axios.get(baseUrl + "/userSign/selectSignInfo?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.signList = resultObj.data.signTimeList;
            this.signCount = resultObj.data.signNumber;
            this.dayScore = parseInt(resultObj.data.gainDayScore + this.rankScore);
          }
          this.showSign = 2;
          this.showDay = true;
          if (callback) {
            callback(resultObj.data.gainDayScore);
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      repairSign() {//网络异常补签
        this.querySign();
      },
      scrollUp() {//无缝滚动
        setInterval(() => {
          this.animate = true;// 向上滚动的时候需要添加css3过渡动画
          setTimeout(() => {
            this.rankList.push(this.rankList[0]);// 将数组的第一个元素添加到数组的
            this.rankList.shift(); //删除数组的第一个元素
            this.animate = false;
          }, 500)
        }, 1500);
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'hh:mm:ss');
      },
    },
    components: {
      "v-calendar": calendar
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .signWrap
    wh(100%, 100%)
    .sign-box
      wh(100%, 5.333333rem)
      bg-image("./bg.png", 100%, 100%)
      overflow: hidden
      .sign-status
        margin: 0 auto
        margin-top: 0.866666rem
        wh(2.2rem, 2.2rem)
        bg-image("./sign.png", 100%, 100%)
        size-color(0.333333rem, #FF7E00)
        .sign-score
          padding-top: 0.75rem
          text-align: center
          .day
            margin-bottom: 0.1rem
          .num
            margin-top: 0.1rem
        .sign-btn
          text-align: center
          line-height: 2.2rem
      .sign-title
        margin-top: 0.2rem
        text-align: center
        size-color(0.4289rem, rgba(255, 255, 255, 1))
        text-shadow: 0.026666rem 0.04rem 0rem rgba(47, 91, 180, 0.41)

    .sign-rank
      wh(81.07%, 0.866666rem)
      margin: 0 auto
      background: #FFF
      border: 0.013rem solid #E6E6E6
      border-radius(0.44rem)
      box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.13)
      overflow: hidden
      .activity-box
        display: flex
        margin: 0 auto
        wh(95.61%, 100%)
        .activity
          wh(100%, 100%)
          li
            display: flex
            align-items: center
            wh(100%, 100%)
            .text1
              margin-right: 0.2rem
              size-color(0.293333rem, #FF6060)
            .avatar
              margin-right: 0.05rem
              wh(0.6rem, 0.6rem)
              border-radius(50%)
            .nickname
              width: 2rem
              ellipsis()
              size-color(0.293333rem, #1B1B1B)
              margin-right: 0.4rem
            .score
              margin-right: 0.04rem
              size-color(0.293333rem, #1B1B1B)
            .icon
              wh(0.266666rem, 0.266666rem)
            .time
              margin-left: auto
              size-color(0.293333rem, #4A4A4A)
        .active
          transition: all 0.5s
          margin-top: -0.866666rem
      .loading
        text-align: center
        font-size: 0.32rem
        line-height: 0.866666rem
    .calendar-item >>> .sign
      position: relative
      border: 0.013rem solid rgba(60, 175, 255, 1)
      border-radius: 50%
    .signModal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .model-box
        wh(5.693rem, 5.04rem)
        bg-image("./modal.png", 100%, 100%)
        .start
          fj(center, center)
          margin-top: 3.533rem
          text-align: center
          .icon
            wh(0.747rem, 0.48rem)
          .number
            size-color(0.373rem, rgba(255, 179, 0, 1))
        .success
          margin-top: 0.267rem
          text-align: center
          size-color(0.4rem, rgba(67, 67, 67, 1))

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s ease;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0
  }

</style>
